<template>
  <svg  @click="itemRightClick($event,itemObj,data_id,brandInfo,stateDesc,isMainPage,name,'duanluqi',info)"
        @contextmenu.stop.prevent="itemRightClick_2($event,itemObj,data_id,brandInfo,stateDesc,isMainPage,name,'duanluqi',info)">
    <g :transform="'translate(' + translateX + ',' + translateY + ')rotate('+ rotate +')scale('+scale+')'" class="cursor-pointer">

      <rect
        :width="36"
        :height="17"
        :x="2"
        :y="32"
        :fill="Number(state) === 1 && Number(itemObj.is_clear) === 1 ? 'red' : '#93f958'"
        :stroke="Number(state) === 1 && Number(itemObj.is_clear) === 1 ? '#FF5B41' : '#93f958'" :stroke-width="Number(state) === 0 ? 3 : 0"
        :class="{rect10: Number(state) === 1 && Number(itemObj.is_clear) === 0,rect00_1: Number(state) === 0 && Number(itemObj.is_clear) === 0}"
        ></rect>
    </g>
    <g :transform="'translate(' + translateX + ',' + translateY + ')rotate('+textRotate+')'" class="cursor-pointer">
      <g v-if="rotate === 0" :transform="'translate(' + textTranslateX + ',' + textTranslateY + ')'">
        <text x="2" y="20" fill="#fff">{{name}}</text>
      </g>
      <g v-else-if="rotate === 90" :transform="'translate('+ textTranslateX +','+textTranslateY+')'" class="cursor-pointer">
        <text x="-25" y="25" fill="#fff">{{name}}</text>
      </g>
    </g>
  </svg>
</template>
<script>
import {submitOperateRecord} from "@/api/api";

export default {
  props: {
		itemObj: {
			type: Object
		},
      info:{
            type:Object,
            default: function (){
                return {}
            }
      },
      stateDesc:{
            type: String,
            default: ""
        },
    textRotate:{
            type: Number,
            default: 0
        },
      isMainPage:{
            type: Boolean,
            default: false
        },
      scale:{
            type: Number,
            default: 1
      },
        brandInfo:{
            type: String,
            default: ""
        },
      data_id:{
            type: String,
            default: ''
        },
    name: {
      type: String
    },
    state: {
      required: true,
      type: [Number, String],
      default: 0
    },
    controlIndex: { // 控件索引
      required: false,
      type: Number,
    },
    translateX: { // x轴偏移，默认0
      type: Number,
      default: 0
    },
    translateY: { // y轴偏移，默认0
      type: Number,
      default: 0
    },
    rotate: {  // z轴旋转角度,注意不是原地旋转，需要根据x、y轴偏移来调整
      type: Number,
      default: 0
    },
    textTranslateX: { // 文本x轴偏移
      type: Number,
      default: 0
    },
      textTranslateY:{
            type: Number,
            default: 0
        }

  },
    computed: {
        // rectClass() {
        //     if (Number(this.state) === 1 && Number(this.itemObj.is_clear) === 0) {
        //         return 'rect10';
        //     } else if (Number(this.state) === 0 && Number(this.itemObj.is_clear) === 0) {
        //         return 'rect00_1';
        //     }
        //     return '';
        // },
        // rectFill() {
        //     if (Number(this.state) === 1 && Number(this.itemObj.is_clear) === 1) {
        //         return 'red';
        //     } else if (Number(this.state) === 0 && Number(this.itemObj.is_clear) === 1) {
        //         return '#87d66e';
        //     }
        //     return '#87d66e';
        // },
        // rectStroke() {
        //     if (Number(this.state) === 1 && Number(this.itemObj.is_clear) === 1) {
        //         return '#FF5B41';
        //     } else if (Number(this.state) === 0 && Number(this.itemObj.is_clear) === 1) {
        //         return '#87d66e';
        //     }
        //     return '';
        // },
        // rectStrokeWidth() {
        //     if (Number(this.state) === 0 && Number(this.itemObj.is_clear) === 0) {
        //         return 3;
        //     } else if (Number(this.state) === 0 && Number(this.itemObj.is_clear) === 1) {
        //         return 3;
        //     }
        //     return 0;
        // }
    },
  data(){
    return {
      borderColor: '',
      timer: null,

			faultAbnormalObj: {
				faultData: [
					{id:1, label: '2号主变断路器动作1'},
					{id:2, label: '2号主变断路器动作2'},
				],
				abnormalData: [
					{id:1, label: '2号主变断路器着火', typeList:[{value: 0, label: '正常'}, {value: 1, label: '着火'}], currentType: {value:0, label: '正常'}},
					{id:2, label: '2号主变断路器漏油', typeList:[{value: 0, label: '正常'}, {value: 1, label: '漏油'}], currentType: {value:0, label: '正常'}},
				],
			},

    }
  },
  methods: {
		itemRightClick(event, currentItem,data_id,brandInfo,stateDesc,isMainPage,name,type,info) {
            if (!this.isMainPage){
                event.stopPropagation()
            }else{
              return
            }
      console.log(currentItem,'currentItem');
			event.preventDefault(); // 阻止默认的右键菜单弹出
			// 显示自定义右键菜单
			const {clientX, clientY} = event
			let params = {
				clientX,
				clientY,
          info,
          data_id,
          brandInfo,
          stateDesc,
          isMainPage,
          deviceName:name,
				type: currentItem?.type?currentItem?.type:type,
				jianGeMing: currentItem?.jiangeName,
				faultAbnormalObj: this.faultAbnormalObj,
				currentObj: {
					name: currentItem?.deviceName?currentItem?.deviceName:name,
					state: currentItem?.state?currentItem?.state:this.state,
					controlIndex: this.controlIndex,
					controlStatusList: [{value:0,label: '分'},{value:1, label: '合'}],
					noName: currentItem?.noName,
            dlq:true
				},
				guapaiObj: {
					factory: '110kV荷园变',
					factoryName: currentItem?.deviceName?currentItem?.deviceName:name,
				},
				yaokongObj: {
					controlNo: currentItem?.noName,
					title: '110kV荷园变',
					measurePoint: currentItem?.deviceName?currentItem?.deviceName:name,
					state: currentItem.state??this.state,
				},
			}
			this.$emit('itemRightClick', params)
		},
      itemRightClick_2(event, currentItem,data_id,brandInfo,stateDesc,isMainPage,name,type,info){
          if (!this.isMainPage){
              this.desc=this.$store.state.operDescData.find(item=>item.type==='jc'&&item.comType==='开关').desc;
              this.desc=this.desc.replace('jgName',this.info.jg_name).replace('devName',this.info.state_desc).replace('state', (Number(this.state) === 0 ? "分" : "合"))
             submitOperateRecord( {log_desc:this.desc})
              return
          }
          event.preventDefault(); // 阻止默认的右键菜单弹出
          // 显示自定义右键菜单
          const {clientX, clientY} = event
          let params = {
              clientX,
              clientY,
              info,
              data_id,
              brandInfo,
              stateDesc,
              isMainPage,
              deviceName:name,
              type: currentItem?.type?currentItem?.type:type,
              jianGeMing: currentItem?.jiangeName,
              faultAbnormalObj: this.faultAbnormalObj,
              currentObj: {
                  name: currentItem?.deviceName?currentItem?.deviceName:name,
                  state: currentItem?.state?currentItem?.state:this.state,
                  controlIndex: this.controlIndex,
                  controlStatusList: [{value:0,label: '分'},{value:1, label: '合'}],
                  noName: currentItem?.noName,
                  dlq:true
              },
              guapaiObj: {
                  factory: '110kV荷园变',
                  factoryName: currentItem?.deviceName?currentItem?.deviceName:name,
              },
              yaokongObj: {
                  controlNo: currentItem?.noName,
                  title: '110kV荷园变',
                  measurePoint: currentItem?.deviceName?currentItem?.deviceName:name,
                  state: currentItem.state??this.state,
              },
          }
          this.$emit('itemRightClick', params)

      },








    // 点击事件
    clickHandler() {
      let state = this.state;
      clearInterval(this.timer);
      if (this.state === 1) {
        state = 3;
        this.borderColor = '#93f958';
        this.startHollowFlickerInterval();
      } else if (this.state === 3) {
        state = 2;
      } else if (this.state === 2) {
        this.borderColor = '#FF5B41';
        this.startSolidFlickerInterval();
        state = 4;
      } else if (this.state === 4) {
        state = 1;
      }
      this.$emit('changeStatus', {
        controlIndex: this.controlIndex,
        state
      });
    },
    // 绿色和白色空心框闪烁
    startHollowFlickerInterval() {
      let count = 0;
      this.timer = setInterval(() => {
        if (count % 2 !== 0) {
          this.borderColor = '#93f958';
        } else {
          this.borderColor = '#FFFFFF';
        }
        count++;
      }, 500);
    },
    // 红色和灰白色实心框闪烁
    startSolidFlickerInterval() {
      let count = 0;
      this.timer = setInterval(() => {
        if (count % 2 !== 0) {
          this.borderColor = '#FF5B41';
        } else {
          this.borderColor = '#C5C5C5';
        }
        count++;
      }, 500);
    }
  }
}
</script>
<style lang="less" scoped>
.cursor-pointer {
  cursor: pointer;
}
svg {
  transform-origin: center center;

	// 节点动画
	// 合闸
	.rect10 {
		animation:rect10Animation 3s linear infinite;
	}
	@keyframes rect10Animation
	{
		0% {fill:red;}
		50% {fill:#ccc;}
		100% {fill:red;}
	}
	// 分闸
	.rect00_1 {
		animation:rect001Animation 2s linear infinite;
	}
	@keyframes rect001Animation
	{
		0% {stroke:#93f958;fill:#93f958;stroke-width:2}
		50% {stroke:#eee;fill:#eee;stroke-width:2}
		100% {stroke:#93f958;fill:#93f958;stroke-width:2}
	}


	.rect00_2 {
		animation:rect002Animation 2s linear infinite;
	}
	@keyframes rect002Animation
	{
		0% {stroke:#ffaee3;stroke-width:2;opacity: 1;}
		50% {stroke:#ffaee3;stroke-width:2;opacity: 0;}
		100% {stroke:#ffaee3;stroke-width:2;opacity: 1;}
	}

}
</style>
